<template>
    <div class="facilities">

        <!-- 第一类设施 -->
        <div class="facility-category">
            <div class="facility-item" v-for="(facility, index) in basicFacilities" :key="index">
                <img :src="facility.icon" class="svg-icon" :alt="facility.name + '图标'">
                <span>{{ facility.name }}</span>
            </div>
        </div>

        <hr /> <!-- 分割线 -->

        <!-- 第二类设施 -->
        <div class="facility-category">
            <div class="facility-item" v-for="(facility, index) in entertainmentFacilities" :key="index">
                <img :src="facility.icon" class="svg-icon" :alt="facility.name + '图标'">
                <span>{{ facility.name }}</span>
            </div>
        </div>

        <hr /> <!-- 分割线 -->

        <!-- 第三类设施 -->
        <div class="facility-category">
            <div class="facility-item" v-for="(facility, index) in serviceFacilities" :key="index">
                <img :src="facility.icon" class="svg-icon" :alt="facility.name + '图标'">
                <span>{{ facility.name }}</span>
            </div>
        </div>

    </div>
</template>

<script setup>
//外景设施标配
const basicFacilities = [
    { icon: '/InfrastructurePic/WIFI.svg', name: '免费wifi' },
    { icon: '/InfrastructurePic/停车.svg', name: '免费停车场' },
    { icon: '/InfrastructurePic/电梯.svg', name: '电梯' },
    { icon: '/InfrastructurePic/团餐餐厅.svg', name: '餐厅' },
    { icon: '/InfrastructurePic/咖啡厅.svg', name: '咖啡厅' },
    { icon: '/InfrastructurePic/棋牌室.svg', name: '棋牌室' },
    { icon: '/InfrastructurePic/无烟楼层.svg', name: '无烟楼层' },
    { icon: '/InfrastructurePic/吸烟区.svg', name: '吸烟区' },
    { icon: '/InfrastructurePic/花园.svg', name: '花园' },
];

//服务
const entertainmentFacilities = [
    { icon: '/InfrastructurePic/行李寄存.svg', name: '行李寄存' },    
    { icon: '/InfrastructurePic/专职行李员.svg', name: '专职行李员' },
    { icon: '/InfrastructurePic/叫车服务.svg', name: '叫车服务' },
    { icon: '/InfrastructurePic/洗衣服务.svg', name: '洗衣服务' },
    { icon: '/InfrastructurePic/熨衣服务.svg', name: '熨衣服务' },
    { icon: '/InfrastructurePic/送餐服务.svg', name: '送餐服务' },
];

//室内设施
const serviceFacilities = [
    { icon: '/InfrastructurePic/电热水壶.svg', name: '热水壶' },
    { icon: '/InfrastructurePic/吹风机.svg', name: '吹风机' },
    { icon: '/InfrastructurePic/24小时热水.svg', name: '24小时热水' },
    { icon: '/InfrastructurePic/衣柜.svg', name: '衣柜/衣橱' },  
    { icon: '/InfrastructurePic/浴衣.svg', name: '浴衣' },    
    { icon: '/InfrastructurePic/浴室.svg', name: '浴室' },
    { icon: '/InfrastructurePic/拖鞋.svg', name: '拖鞋' },
    { icon: '/InfrastructurePic/空调.svg', name: '空调' },
    { icon: '/InfrastructurePic/电话.svg', name: '电话' },
    { icon: '/InfrastructurePic/液晶电视机.svg', name: '液晶电视机' },
];
</script>

<style scoped>
/* 整个容器大框 */
.facilities {
    /* background: lightblue; */
    display: flex;
    flex-direction: column;
    /* 让不同的设施分类垂直排列 */
    padding: 20px;
}

/* 每一类设施 */
.facility-category {
    /* background: gold; */
    display: flex;
    /* 启用flex布局 */
    flex-wrap: wrap;
    /* 如果设施项多时换行 */
}

/* 类标题 */
.facility-category h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    width: 100%;
    /* 确保标题独占一行 */
}

/* 设施项容器，水平排列 */
.facility-item {
    /* background: red; */
    display: flex;
    /* 启用flex布局 */
    flex-direction: row;
    /* 图标和文字水平排列 */
    align-items: right;
    /* 垂直居中对齐图标和文字 */
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    width: 18%;
    /* 每个设施项占据18%的宽度，保持五项一行 */
    box-sizing: border-box;
    /* 包括padding和border在内计算宽度 */
}

/* 图标 */
.svg-icon {
    width: 24px;
    /* 控制图标大小 */
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
}

/* 文字 */
.facility-item span {
    font-size: 14px;
    color: #333;
}

/* 分割线 */
hr {
    border: 1px solid #666;
    margin: 20px 0;
}
</style>